<template>
  <div class="go-tabsBottom aic">
    <n-scrollbar x-scrollable class=" " 
    style="width:auto;margin-right:0px;max-width:calc( 100% - 150px);">
     <div class="aic flexNoWrap tabsBottomspace positionR">
  <div v-for="(item, index) in tabsBottomList" :key="index"
      @click="handleSelectElement(item,index)"
     :class="[modelValue==item.id?'tabsBottomItem tabsBottomItemActive  aic jcb':'tabsBottomItem aic jcb']">
        <div>
          <n-tooltip trigger="hover">
            <template #trigger>
              <div class="aic">
                <n-icon  size="18">
                  <BarChartSharp v-if="item.type == TabsBottomType.INSTRUMENT"></BarChartSharp>
                  <ExtensionPuzzle v-if="item.type == TabsBottomType.COMPONENT"></ExtensionPuzzle>
                  <ServerSharp v-if="item.type == TabsBottomType.DATA"></ServerSharp>
                </n-icon>
                <CellInput v-model="item.name"></CellInput>
              </div>
            </template>
            {{ item.name }}
          </n-tooltip>
        </div>
            <!-- 操作按钮 -->
        <div  style="margin-top:2px">
                <n-dropdown
                trigger="hover"
                v-if="item.close"
                placement="bottom-start"
                :options="optionsModel"
                @select="handleSelectModel"
            >
                <n-icon size="20"    >
                  <EllipsisVerticalSharp></EllipsisVerticalSharp>
                </n-icon>
            </n-dropdown>

        </div>
      </div>
     </div>
    
    </n-scrollbar>

    <div class="tabsBottomaction aic">
            <n-dropdown
                trigger="hover"
                placement="bottom-start"
                :options="options"
                @select="handleSelect"
            >
                <n-icon size="22">
                  <AddCircle></AddCircle>
                </n-icon>
            </n-dropdown>
    </div>

    <!-- 删除确认框  -->
      <n-modal v-model:show="showDeleteModal" preset="dialog" title="Dialog">
    <template #header>
      <div>删除操作</div>
    </template>
    <div>确认删除 {{showDeleteData.name}} 
       <!-- <span v-if="showDeleteData.type==TabsBottomType.COMPONENT">
        {{TabsBottomTypeName.COMPONENT}}
       </span>
        <span v-if="showDeleteData.type==TabsBottomType.INSTRUMENT">
               {{TabsBottomTypeName.INSTRUMENT}}
        </span> -->
    </div>
    <template #action>
        <n-space>
             <n-button @click="showDeleteModal=false" :disabled="loading" :loading="loading">取消</n-button>
              <n-button @click="handleDelete" type="primary" :disabled="loading" :loading="loading">确定</n-button>
        </n-space>
    </template>
  </n-modal>
  </div>
</template>

<script setup lang="ts">
import { ref,h, Component } from 'vue'
import CellInput from '@/components/cellInput/index.vue'
import { useReportStore } from '@/views/Bi/store/useReportStore'
import { TabsBottomType,TabsBottomTypeName } from '@/enums/editReportEnum'
import { NIcon,useThemeVars } from 'naive-ui'

const themeVars = useThemeVars()
import {
  AddCircle, //新增
  BarChartSharp, //仪表盘
  ExtensionPuzzle, //组件
  ServerSharp, //数据
EllipsisVerticalSharp,//模块菜单
Trash,//删除
} from '@vicons/ionicons5'
const showDeleteModal = ref(false)
const loading = ref(false)
const showDeleteData = ref()
const emit = defineEmits(["update:modelValue","add","delete"])
const props = defineProps({
      modelValue: {
    type: String,
    required: true,
  },
  tabsBottomList:{
    type: Array,
     required: true,
  }
})
const renderIcon = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon)
    })
  }
}
const optionsModel= ref([
        {
          label:"删除",
          key: "delete",
          icon:renderIcon(Trash) 
        },

      ])
const   options= ref([
        {
          label:TabsBottomTypeName.COMPONENT,
          key: TabsBottomType.COMPONENT,
          icon:renderIcon(AddCircle) 
        },
     {
          label: TabsBottomTypeName.INSTRUMENT,
          key: TabsBottomType.INSTRUMENT,
          icon:renderIcon(AddCircle) 
        },
      ])
      const handleSelectElement = (item:any)=>{
        emit("update:modelValue",item.id,item)
      }
      
        const handleSelectModel = (key:string)=>{
            console.log(key)
            if(key=="delete"){
                 showDeleteData.value =  props.tabsBottomList.find((res:any)=>{
                    return res.id == props.modelValue
                 }) 
                 showDeleteModal.value = true
                // 
            }
      }
      const handleCellInput =(value:string,item:any)=>{
      }
      const handleDelete = ()=>{
        
        loading.value =  true;
        setTimeout(() => {
             loading.value = false
             showDeleteModal.value = false
             emit("delete",showDeleteData)
        }, 3000);
      }
      //新增组件或者仪表盘
      const handleSelect = (key:string)=>{
        emit('add',key)
      }
</script>
 
<style lang="scss" >
 
.positionR{
    position: relative;
}
@include go(tabsBottom) {
  width: 100%;
  overflow-x: auto;
  // 
  padding-bottom: 10px;
  position: relative;
  padding: 0 20px;
    background-color: v-bind('themeVars.bodyColor');
  // background-color: #eef1f6;
  .tabsBottomspace{
border-top: 1px solid v-bind('themeVars.borderColor');;
 
  }
  .tabsBottomItem {
    max-width: 200px;
    cursor: pointer;
    height: 30px;
    width: 200px;
    border-radius:5px;
    // border:1px solid #cfd4dc;
    position: relative;
    margin-top: -1px;
    // padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    color:  v-bind('themeVars.textColor1');
    display: flex;
  }
  .tabsBottomItem:hover{
     background-color: v-bind('themeVars.cardColor');
  }
  .tabsBottomItemActive{
     background-color: v-bind('themeVars.cardColor');
    border:1px solid v-bind('themeVars.borderColor');
      border-top: 1px solid v-bind('themeVars.bodyColor');
      position: relative;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
}
.tabsBottomItemActive::before{
background-color: v-bind('themeVars.borderColor');;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: -2px;
    width: auto;
    z-index: 1;
}
  .tabsBottomaction{
    margin-left: 10px;
    color:  v-bind('themeVars.textColor1');
  }
}
</style>
